<template>
  <div id="sideNav">
    <img :src="logoImg" alt="logo" style="height:44px;margin-bottom:20px">
    <div class="side-menu">
      <div class="menu-nav" :style="{ '--mark-top': markTop }">
        <ul>
          <li v-for="(nav, index) in side" :key="index" v-if="!nav.hidden" :class="{ 'active-nav': activeIndex == index }" @click="handleNav(nav)">
            <!-- {{ nav.meta.title }} -->
            <i :class="nav.url" :title="nav.name"></i>
            <p>{{ nav.levelName }}</p>
          </li>
        </ul>
      </div>
      <div class="menu-list">
        <ul>
          <!-- <li class="menu-desc">{{ activeNavInfo.menuDesc }}</li> -->
          <li v-for="(menu,index) in activeNavInfo.nodes" :key="index" :class="{ active:activeMenuId == index }" @click="handleMenu(menu)">
            {{ menu.name }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script >
import logoImg from '@/assets/img/logo2.png'

export default {
  name: 'sideMenu',
  props: ['side', 'collapse'],
  data() {
    return {
      logoImg,
      activeIndex: 0,
      activeMenuId: null
    }
  },
  computed: {
    activeNavInfo() {
      return this.side[this.activeIndex] || {}
    },
    markTop() {
      return this.activeIndex * 74 + 36 + 'px'
    }
  },
  methods: {
    handleNav(nav) {
      this.activeIndex = this.side.findIndex(s => s.id == nav.id)
      sessionStorage.setItem('activeNavIndex', this.activeIndex)
    },
    handleMenu(menu) {
      this.activeMenuId = menu.id
      this.$router.push(`/${menu.url}`)
    }
  },
  mounted() {
    const index = sessionStorage.getItem('activeNavIndex')
    if (index) {
      this.activeIndex = parseInt(index)
    }
  },
  components: {}
}
</script>

<style lang="scss" scoped>
#sideNav {
  height: 100%;
  padding: 10px;
  border-right: 1px solid #f1f2f3;
  text-align: center;
  background-color: #fff;
}

.side-menu {
  height: calc(100% - 66px);
  display: flex;

  .menu-nav {
    height: 100%;
    padding: 10px 0;
    background: #5867dd;
    border-radius: 5px;
    position: relative;
    color: #fff;

    &::after {
      content: '';
      position: absolute;
      right: -10px;
      top: var(--mark-top);
      width: 16px;
      height: 16px;
      background: #fff;
      border-radius: 2px;
      transform: rotate(45deg);
      transform-origin: (center, center);
      transition: top 0.2s;
    }

    li {
      width: 5em;
      padding: 10px;
      margin-bottom: 10px;
      cursor: pointer;
      overflow: hidden;

      i {
        color: #cdcdcd;
        font-size: 24px;
        margin-bottom: 4px;
      }

      &:hover {
        background: #7a85d8;

        i {
          color: #fff;
        }
      }
    }

    .active-nav {
      i {
        color: #fff;
      }
    }
  }

  .menu-list {
    padding-top: 20px;
    padding-left: 16px;
    width: 100%;
    text-align: left;

    li {
      padding-left: 0.5em;
      line-height: 2.6em;
      margin-bottom: 0.5em;
      border-radius: 4px;
      cursor: pointer;

      &:hover {
        background: #ececec;
      }
    }

    .active {
      background: #ececec;
      color: #5867dd;
    }

    .menu-desc {
      font-size: 1.2em;
      font-weight: 600;
      padding: 0;
      margin-bottom: 0;
      cursor: auto;

      &:hover {
        background: #fff;
      }
    }
  }
}
</style>
